<template>
  <div>
    <div class="header-box">
      <div class="header">
        <ul>
          <router-link
            v-for="(item, index) in arr"
            :key="index"
            :to="'/' + item.site"
          >
            <li
              :class="['active', { active2: currentIndex === item.id }]"
              @click="activeHandle(item.id, item.site)"
            >
              {{ item.title }}
            </li>
          </router-link>
        </ul>
      </div>
    </div>

    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 1001,
      arr: [
        {
          id: 1001,
          name: "first",
          title: "互联网",
          site: "talk",
        },
        {
          id: 1002,
          name: "second",
          title: "代步车",
          site: "talk/talkscooter",
        },
        {
          id: 1003,
          name: "third",
          title: "旅游",
          site: "talk/talktour",
        },
        {
          id: 1004,
          name: "fourth",
          title: "美食",
          site: "talk/talkfood",
        },
        {
          id: 1005,
          name: "fifth",
          title: "试听",
          site: "talk/talkaudition",
        },
        {
          id: 1006,
          name: "sixth",
          title: "数码",
          site: "talk/talknumerical",
        },
        {
          id: 1007,
          name: "seventh",
          title: "事实",
          site: "talk/talkfact",
        },
        {
          id: 1008,
          name: "eighth",
          title: "生活",
          site: "talk/talklive",
        },
      ],
    };
  },
  methods: {
    activeHandle(index, site) {
      this.currentIndex = index;
    },
  },
};
</script>

<style lang="less" scoped>
.header-box {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.header {
  width: 1200px;
  margin: 0 auto;

  ul {
    overflow: hidden;
  }
}
.active {
  float: left;
  padding: 20px 30px;
  color: #000;
}
.active:hover {
  color: #109d59;
}
.active2 {
  color: #109d59;
  position: relative;
}
.active2::after {
  content: "";
  height: 5px;
  width: 100%;
  background: #109d59;
  position: absolute;
  bottom: 0;
  left: 0;
}
</style>